<template>
  <div class="users">
      <Row>

        <Col span="4"><Button type="primary" @click="addData">添加数据</Button>
        <Button type="error" @click="removesData">删除多条</Button>
        </Col>
        <Col span="12"><Input search enter-button v-model="name" style="width:200px float:'left'" placeholder="请输入关键字" @on-search="searchData"/></Col>
    </Row>
        <Table stripe height="400" border :columns="columns" :data="listData" @on-selection-change="onSelectionChange"></Table>
        <Page :total="total" show-sizer @on-change="onChangePage" @on-page-size-change="onPageSizeChange" :page-size-opts="[5,10,20,30,40,50]"/>
        <Modal
        v-model    = "modal1"
        title      = "详细信息"
        @on-ok     = "ok"
        @on-cancel = "cancel"
        :footer-hide = true>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="姓名" prop="name">
                <Input v-model="formValidate.name" placeholder="请输入姓名"></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input v-model="formValidate.password" placeholder="请输入密码"></Input>
            </FormItem>
            <FormItem label="年龄" prop="age">
                <Input v-model="formValidate.age" placeholder="请输入年龄"></Input>
            </FormItem>
            <FormItem label="E-mail" prop="email">
                <Input v-model="formValidate.email" placeholder="Enter your e-mail"></Input>
            </FormItem>
            <FormItem label="联系地址" prop="address">
                <Input v-model="formValidate.address" placeholder="请输入地址"></Input>
            </FormItem>
            <FormItem label="兴趣爱好" prop="hobby">
                <Input v-model="formValidate.hobby" placeholder="请输入兴趣爱好"></Input>
            </FormItem>
            <FormItem label="手机号码" prop="phone">
                <Input v-model="formValidate.phone" placeholder="请输入手机号码"></Input>
            </FormItem>
            <FormItem label="职业" prop="professional">
                <Input v-model="formValidate.professional" placeholder="请输入职业"></Input>
            </FormItem>
            <FormItem >
                <RadioGroup v-model="formValidate.vip" >
                    <Radio :label="1" >vip用户</Radio>
                    <Radio :label="0" >非vip用户</Radio>
                </RadioGroup>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">清除</Button>
            </FormItem>
        </Form>
    </Modal>
  </div>
</template>

<script>
import  { Base } from '../mixins/Base';

export default {
  mixins:[Base],
  data(){
    return {
     formValidate: {
        name: '',
        password: '',
        age: '',
        email: '',
        address: '',
        hobby:'',
        phone:'',
        professional:'',
        vip:'',

    },
    haha:1,
    ruleValidate: {
        name: [
            {required: true, message: '用户名不能为空', trigger: 'blur' },
            {pattern:/^[a-zA-Z0-9_-]{6,12}$/, message: '6到12位（字母，数字，下划线，减号）', trigger: 'blur'}
        ],
        password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            {pattern:/^[a-zA-Z0-9_-]{6,12}$/, message: '6到12位（字母，数字，下划线，减号）', trigger: 'blur'}
        ],
        age: [
            { required: true, validator:this.validateage, trigger: 'blur' }
        ],
        email: [
            { required: true,message: 'Email不能为空', trigger: 'blur' },
            {pattern:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/, message: '请输入正确的邮箱', trigger: 'blur'}
        ],
        address: [
            { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        hobby: [
            { required: true, message: '请输入兴趣爱好', trigger: 'blur' }
        ],
        phone: [
            { required: true, validator:this.validatephone, trigger: 'blur' }
        ],
        professional: [
            { required: true, message: '请输入职业', trigger: 'blur' }
        ],

    },
      columns: [
          {
            type: 'selection',
            width: 50,
            align: 'center',
            fixed: 'left',
          },
          {
              title: '账号',
              key  : 'name',
              fixed: 'left',
              width:120
          },
          {
              title: '会员',
              key  : 'vip',
              width:100,
              render:function(h,params){
                return h('span',params.row.vip==true?'会员用户':'普通用户');
              }

          },
          {
              title: '手机',
              key  : 'phone',
              width:150
          },
          {
              title: '邮箱',
              key  : 'email',
              width:150
          },
          {
              title: '地址',
              key  : 'address',
              width:150
          },
          {
              title: '职业',
              key  : 'professional',
              width:80
          },
          {
              title: '年龄',
              key  : 'age',
              width:80
          },
          {
              title: '爱好',
              key  : 'hobby',
              width:100
          },
          {
              title: '日期',
              key  : 'date',
              width:150,
              render:function(h,params){
                //console.log(params.row.date);
                var date=new Date(+new Date(new Date(params.row.date).toJSON()) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
                //console.log(date);
                return h('span',date);
              }
          },

          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            fixed: 'right',
            render: (h, params) => {
                return h('div', [
                    h('Button', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                // this.show(params.index)
                                this.editData(params.row._id);

                            }
                        }
                    }, '修改'),
                    h('Button', {
                        props: {
                            type: 'error',
                            size: 'small'
                        },
                        on: {
                            click: () => {
                                this.removeData(params.row._id);
                            }
                        }
                    }, '删除')
                ]);
            }
        }
      ]
    }
  },

  methods: {

      validateage(rule, value, callback){
      let regNum = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
      if (value === '') {
            callback(new Error('年龄不能为空'));
      } else if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字'));
      } else if (!regNum.test(value)) {
            callback(new Error('年龄格式不正确'));
      } else {
            callback();
      }
    },
    validatephone(rule, value, callback){
      let regNum = /^1[34578]\d{9}$/;
      if (value === '') {
            callback(new Error('手机号不能为空'));
      } else if (!Number.isInteger(+value)) {
            callback(new Error('请输入数字'));
      } else if (!regNum.test(value)) {
            callback(new Error('手机号码格式不正确'));
      } else {
            callback();
      }
    },
    vipbd(res){
       res.data.vip=Number(res.data.vip);
    }
  },
}
</script>
